<template>
    <el-form :model="editprofession" :rules="rules" ref="editprofession" label-width="100px">
        <el-row>
            <div class="col-md-6">
                <el-form-item label="职称层级" :required="true">
                    <el-select :disabled="!isEditable" v-model="editprofession.level" @change="onlevelChange">
                        <el-option v-for="item in this.levellist" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="col-md-6">
                <el-form-item label="职称级别">
                    <el-select :disabled="!isEditable" v-model="editprofession.positionlevel">
                        <el-option v-for="item in this.positionlevels" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-row>
        <el-row>
            <div class="col-md-6">
                <el-form-item label="职称类别">
                    <el-select :disabled="!isEditable" v-model="editprofession.techcate">
                        <el-option v-for="item in this.techcategorylist" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="col-md-6">
                <el-form-item label="职称名称" prop="name">
                    <el-input :disabled="!isEditable" type="text" v-model="editprofession.name" placeholder="职称名称"></el-input>
                </el-form-item>
            </div>
        </el-row>
        <el-row>
            <div class="col-md-6">
                <el-form-item label="资格获取时间">
                    <MyDatePicker :editable="isEditable" v-bind:date="editprofession.obtaintime" @timeChanged="(time)=>this.editprofession.obtaintime =time">
                    </MyDatePicker>
                    <!-- <el-date-picker :disabled="!isEditable" :default-value="defaultValue" :month="1" v-model="editprofession.obtaintime" @change="(time)=>this.editprofession.obtaintime =time" type="month" placeholder="选择资格获取时间">
                        </el-date-picker> -->
                </el-form-item>
            </div>
            <div class="col-md-6">
                <el-form-item label="岗位聘任时间">
                    <MyDatePicker :editable="isEditable" v-bind:date="editprofession.employtime" @timeChanged="(time)=>this.editprofession.employtime =time">
                    </MyDatePicker>
                    <!-- <el-date-picker :disabled="!isEditable" :default-value="defaultValue" :month="1" v-model="editprofession.employtime" @change="(time)=>this.editprofession.employtime =time" type="month" placeholder="选择岗位聘任时间">
                        </el-date-picker> -->
                </el-form-item>
            </div>
        </el-row>
        <el-row>
            <div class="col-md-6">
                <el-form-item label="聘任单位">
                    <el-input :disabled="!isEditable" type="text" v-model="editprofession.employunit" placeholder="请输入聘任单位"></el-input>
                </el-form-item>
            </div>
            <div class="col-md-6">
                <el-form-item label="聘任文号">
                    <el-input :disabled="!isEditable" type="text" v-model="editprofession.employcert" placeholder="请输入聘任文号"></el-input>
                </el-form-item>
            </div>
        </el-row>
        <el-row>
            <el-form-item label="备注">
                <el-input :disabled="!isEditable" v-model="editprofession.comment" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-row>
    </el-form>
</template>

<script>
    import MyDatePicker from '../../mycomponents/common/MyDatePicker'
    import Utils from "../../../common/utils"
    let util = new Utils();
    export default {
        name: 'ProfessionForm',
        props: ['profession', 'editable'],
        data: function() {
            return {
                defaultValue: new Date(),
                isEditable: true,
                rules: {
                    name: [{
                        required: true,
                        message: "请输入职称名称",
                        trigger: "blur"
                    }],
                    obtaintime: [{
                        required: true,
                        message: "请输入岗位聘任时间",
                        trigger: "change"
                    }],
                    employtime: [{
                        required: true,
                        message: "请输入岗位聘任时间",
                        trigger: "change"
                    }],
                    employunit: [{
                        required: true,
                        message: "请输入聘任单位",
                        trigger: "blur"
                    }],
                    employcert: [{
                        required: true,
                        message: "请输入聘任文号",
                        trigger: "blur"
                    }]
                },
                editprofession: {
                    level: 0,
                    positionlevel: '',
                    techcate: 1,
                    name: '',
                    obtaintime: '',
                    employtime: '',
                    employunit: '',
                    employcert: '',
                    comment: ''
                },
                techcategorylist: this.$store.state.sysconfigs.techcategorylist,
                levellist: this.$store.state.sysconfigs.ptl,
                positionlevels: [],
            }
        },
        components: {
            MyDatePicker
        },
        created() {
            if (this.editable != null && this.editable != undefined) {
                this.isEditable = this.editable
            }
            if (this.profession) {
                this.editprofession = this.profession
            }
            this.onlevelChange(this.editprofession.level)
            this.editprofession.positionlevel = this.profession.positionlevel
        },
        methods: {
            getpostionLevel0() {
                for (var index in this.$store.state.sysconfigs.positionlevels_2) {
                    if (this.$store.state.sysconfigs.positionlevels_2[index].id > 13) {
                        this.positionlevels.push(this.$store.state.sysconfigs.positionlevels_2[index])
                    }
                }
            },
            getpostionLevel1() {
                for (var index in this.$store.state.sysconfigs.positionlevels_2) {
                    if (this.$store.state.sysconfigs.positionlevels_2[index].id <= 13) {
                        this.positionlevels.push(this.$store.state.sysconfigs.positionlevels_2[index])
                    }
                }
            },
            onlevelChange(val) {
                this.positionlevels = []
                if (val == 0) {
                    this.getpostionLevel0()
                } else {
                    this.getpostionLevel1()
                }
                this.editprofession.positionlevel = this.positionlevels[0].id
            },
            getData() {
                var validRes = true
                this.$refs.editprofession.validate((valid) => {
                    if (valid) {
                        validRes = true
                    } else {
                        console.log('editprofession validate failed!!!');
                        validRes = false
                        return false;
                    }
                });
                console.log("editprofession:", JSON.stringify(this.editprofession));
                if (!validRes) {
                    return null
                }
                return this.editprofession
            }
        }
    }
</script>

<style>

</style>
